<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Cache 管理</title>
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <link href="./css/balloon.min.css" rel="stylesheet">
        <style>
            .icon {
                width: 1em;
                height: 1em;
                fill: currentColor;
            }

            .level-0 {
                display: inline-block;
                width: 0;
            }

            .level-1 {
                display: inline-block;
                width: 2em;
            }
        </style>
        <script src="./js/vue.min.js"></script>
        <script type="text/javascript">
            if (typeof fetch !== 'function') {
                alert('你的浏览器太老旧了, 换个新的浏览器吧');
            }
        </script>
    </head>
    <body>
        <!-- Icons -->
        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
            <symbol id="search" viewBox="0 0 32 32">
                <title>search</title>
                <path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path>
            </symbol>
            <symbol id="bin" viewBox="0 0 32 32">
                <title>bin</title>
                <path d="M6 32h20l2-22h-24zM20 4v-4h-8v4h-10v6l2-2h24l2 2v-6h-10zM18 4h-4v-2h4v2z"></path>
            </symbol>
            <symbol id="plus" viewBox="0 0 32 32">
                <title>plus</title>
                <path d="M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z"></path>
            </symbol>
            <symbol id="minus" viewBox="0 0 32 32">
                <title>minus</title>
                <path d="M0 13v6c0 0.552 0.448 1 1 1h30c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1h-30c-0.552 0-1 0.448-1 1z"></path>
            </symbol>
            <symbol id="binoculars" viewBox="0 0 32 32">
                <title>binoculars</title>
                <path d="M2 0h12v2h-12zM18 0h12v2h-12zM29.75 10h-1.75v-8h-8v8h-8v-8h-8v8h-1.75c-1.238 0-2.25 1.012-2.25 2.25v17.5c0 1.238 1.012 2.25 2.25 2.25h9.5c1.238 0 2.25-1.012 2.25-2.25v-11.75h4v11.75c0 1.238 1.012 2.25 2.25 2.25h9.5c1.238 0 2.25-1.012 2.25-2.25v-17.5c0-1.238-1.012-2.25-2.25-2.25zM10.875 30h-7.75c-0.619 0-1.125-0.45-1.125-1s0.506-1 1.125-1h7.75c0.619 0 1.125 0.45 1.125 1s-0.506 1-1.125 1zM17 16h-2c-0.55 0-1-0.45-1-1s0.45-1 1-1h2c0.55 0 1 0.45 1 1s-0.45 1-1 1zM28.875 30h-7.75c-0.619 0-1.125-0.45-1.125-1s0.506-1 1.125-1h7.75c0.619 0 1.125 0.45 1.125 1s-0.506 1-1.125 1z"></path>
            </symbol>
        </svg>

        <div class="container">
            <h2>Cache 管理</h2>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="form-inline">
                        <!--<button type="submit" class="btn btn-default" @click="clean">全部清除</button> -->
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="请输入 Key" v-model="filter">
                            <div class="input-group-addon" role="button">
                                <icon name="search"></icon>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-default" @click="refresh">刷新</button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover table-bordered">
                        <thead>
                            <tr>
                                <td>Key</td>
                                <td width="120">操作</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in filteredKeys" :key="item.name">
                                <td>
                                    <div :class="['level-'+item.$level]"></div>
                                    <span v-if="item.$level===0" role="button" @click="toggleExpand(item)" style="font-size: .8em;" :class="{loading: item.$loading}">
                                        <icon :name="!item.$expand ? 'plus' : 'minus'"></icon>
                                    </span>
                                    &nbsp;
                                    {{item.name}}
                                </td>
                                <td>
                                    <span @click="remove(item.name, index)" role="button" data-balloon="删除">
                                        <icon name="bin"></icon>
                                    </span>
                                    <span v-if="item.$level===1" @click="get(item.name)" role="button" data-balloon="查看">
                                        <icon name="binoculars"></icon>
                                    </span>
                                </td>
                            </tr>
                            <tr v-if="!filteredKeys.length">
                                <td class="text-center text-muted small" colspan="3">暂无数据!</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Mock Start -->
        <script src="./js/client-browserified.js"></script>
        <script>
            fetchMock.get('/names', [
                "shiro.org",
                "shiro.user",
                "shiro.session"
            ]);
            fetchMock.get('/keys?name=shiro.org', [
                "shiro.org.org:1",
                "shiro.org.org:2",
                "shiro.org.org:3",
                "shiro.org.org:4",
                "shiro.org.org:5",
                "shiro.org.org:6"
            ]);
            fetchMock.get('/keys?name=shiro.user', [
                "shiro.user.user:1",
                "shiro.user.user:2",
                "shiro.user.user:3",
                "shiro.user.user:4",
                "shiro.user.user:5",
                "shiro.user.user:6"
            ]);
            fetchMock.get('/keys?name=shiro.session', [
                "shiro.session.session:1",
                "shiro.session.session:2",
                "shiro.session.session:3",
                "shiro.session.session:4",
                "shiro.session.session:5",
                "shiro.session.session:6"
            ]);
            fetchMock.get('*', {
                success: true,
                version: '1.0.0'
            });
        </script>
        <!-- Mock End -->

        <script src="./js/cache.js"></script>
    </body>
</html>